<template>
    <div class="root">
      <!-- 导航栏 -->
      <el-header class="nav">
        <div class="nav__container">
          <div class="nav__content">
            <div class="nav__left">
              <div class="nav__logo">LearnPro</div>
              <el-menu mode="horizontal" :ellipsis="false" class="nav__menu">
                <RouterLink to="/"><el-menu-item index="1">首页</el-menu-item></RouterLink>
              <RouterLink to="/honor"><el-menu-item index="2">荣誉</el-menu-item></RouterLink>
              <RouterLink to="/study"><el-menu-item index="3">学习之路</el-menu-item></RouterLink>
              <RouterLink to="/about"><el-menu-item index="4">关于我们</el-menu-item></RouterLink>
              </el-menu>
            </div>
            <div class="nav__right">
              <el-input
                v-model="searchText"
                placeholder="搜索课程"
                class="w-64"
                :prefix-icon="Search"
              />
              <RouterLink to="/login"><el-button type="primary" class="!rounded-button whitespace-nowrap">登录</el-button></RouterLink>
              <RouterLink to="/register/student"><el-button type="success" class="!rounded-button whitespace-nowrap">注册</el-button></RouterLink>
            </div>
          </div>
        </div>
      </el-header>
      <div class="page">
<div class="container">
<!-- 最新荣誉 -->
<div class="section">
<h2 class="section-title">最新荣誉</h2>
<div class="honors-grid">
<div v-for="(honor, index) in honors" :key="index" class="honor-card">
<div class="honor-image-wrapper">
<img :src="honor.image" :alt="honor.title" class="honor-image">
</div>
<div class="honor-content">
<h3 class="honor-title">{{ honor.title }}</h3>
<p class="honor-description">{{ honor.description }}</p>
</div>
</div>
</div>
</div>
<!-- 历年成就 -->
<div class="section">
<h2 class="section-title">历年成就</h2>
<div ref="chartRef" class="chart"></div>
</div>
<!-- 荣誉时间轴 -->
<div class="section">
<h2 class="section-title">荣誉时间轴</h2>
<div class="timeline">
<div v-for="(year, index) in timeline" :key="index" class="timeline-card">
<h3 class="timeline-year">{{ year.year }} 年度重要成就</h3>
<div v-for="(achievement, idx) in year.achievements" :key="idx" class="timeline-item">
<div class="timeline-dot"></div>
<p class="timeline-title">{{ achievement.title }}</p>
<p class="timeline-description">{{ achievement.description }}</p>
</div>
</div>
</div>
</div>
<!-- 导师团队 -->
<div class="section">
<h2 class="section-title">导师团队</h2>
<div class="mentors-grid">
<div v-for="(mentor, index) in mentors" :key="index" class="mentor-card">
<div class="mentor-avatar-wrapper">
<img :src="mentor.avatar" :alt="mentor.name" class="mentor-avatar">
</div>
<h3 class="mentor-name">{{ mentor.name }}</h3>
<p class="mentor-title">{{ mentor.title }}</p>
<p class="mentor-department">{{ mentor.department }}</p>
</div>
</div>
</div>
</div>
</div>
    </div>
</template>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref<HTMLElement>();
const honors = [
{
title: '2023 全国研究生创新大赛特等奖',
description: '团队成员：王浩然、张明、李佳琪、刘芳、赵云龙',
image: 'https://ai-public.mastergo.com/ai/img_res/4324e33758b4312b422278de8fd83076.jpg'
},
{
title: '2023 年发明专利成果转化奖金奖',
description: '发明人：陈志远、黄晓峰、李明、王洋',
image: 'https://ai-public.mastergo.com/ai/img_res/794d960a3194a56c91b1d54e29c809a3.jpg'
},
{
title: '2023 互联网创新应用大赛一等奖',
description: '团队成员：林思远、孙佳、陈浩、刘鹏',
image: 'https://ai-public.mastergo.com/ai/img_res/b8110a1043cb623779a8be9fc39e37ad.jpg'
}
];
const timeline = [
{
year: '2023',
achievements: [
{
title: '全国研究生创新大赛特等奖',
description: '团队：王浩然、张明、李佳琪、刘芳、赵云龙'
},
{
title: '发明专利成果转化奖金奖',
description: '发明人：陈志远、黄晓峰、李明、王洋'
}
]
},
{
year: '2022',
achievements: [
{
title: '全国高校科技创新一等奖',
description: '团队：林思远、孙佳、陈浩、刘鹏'
},
{
title: '互联网创新应用创新奖',
description: '团队：王浩、李明、张凯、刘洋'
}
]
}
];
const mentors = [
{
name: '陈志远',
title: '教授/博士生导师',
department: '信息与通信工程学院',
avatar: 'https://ai-public.mastergo.com/ai/img_res/41ffed63353d4194c9464aade8b94965.jpg'
},
{
name: '张明峰',
title: 'IEEE Fellow',
department: '人工智能研究中心主任',
avatar: 'https://ai-public.mastergo.com/ai/img_res/033b41557cd76e470ae70280743caa68.jpg'
},
{
name: '林远华',
title: '教授/博士生导师',
department: '计算机科学与技术学院',
avatar: 'https://ai-public.mastergo.com/ai/img_res/cc61417042f4d56866aa88f4bccce13e.jpg'
},
{
name: '王晓琳',
title: '副教授/硕士生导师',
department: '数据科学研究中心副主任',
avatar: 'https://ai-public.mastergo.com/ai/img_res/e220e426248213af2f8aae7fa215399b.jpg'
}
];
onMounted(() => {
if (chartRef.value) {
const chart = echarts.init(chartRef.value);
const option = {
animation: false,
tooltip: {
trigger: 'axis'
},
legend: {
data: ['科研成果', '获奖数量'],
textStyle: {
color: '#fff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2018', '2019', '2020', '2021', '2022', '2023'],
axisLabel: {
color: '#fff'
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#fff'
}
},
series: [
{
name: '科研成果',
type: 'line',
data: [30, 45, 62, 78, 95, 120],
smooth: true,
lineStyle: {
color: '#ffd700'
},
itemStyle: {
color: '#ffd700'
}
},
{
name: '获奖数量',
type: 'line',
data: [20, 32, 41, 54, 68, 85],
smooth: true,
lineStyle: {
color: '#4CAF50'
},
itemStyle: {
color: '#4CAF50'
}
}
]
};
chart.setOption(option);
window.addEventListener('resize', () => {
chart.resize();
});
}
});
const searchText = ref('');
</script>
<style scoped>
.root {
  min-height: 100vh;
  background-color: #fff;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 0;
}
.nav__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
.nav__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
}
.nav__left {
  display: flex;
  align-items: center;
}
.nav__logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: #2563eb;
  margin-right: 2.5rem;
}
.nav__menu {
  border-bottom: none;
}
.nav__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.page {
min-height: 100vh;
background-color: #1e3a8a;
color: white;
padding: 48px 0;
}

.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
min-height: 1024px;
}

.section {
margin-bottom: 64px;
}

.section-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 32px;
}

.honors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.honor-card {
background-color: rgba(30, 64, 175, 0.5);
border-radius: 8px;
overflow: hidden;
}

.honor-image-wrapper {
height: 192px;
overflow: hidden;
}

.honor-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}

.honor-content {
padding: 24px;
}

.honor-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}

.honor-description {
font-size: 14px;
color: #d1d5db;
}

.chart {
width: 100%;
height: 400px;
}

.timeline {
display: flex;
flex-direction: column;
gap: 32px;
}

.timeline-card {
background-color: rgba(30, 64, 175, 0.5);
border-radius: 8px;
padding: 24px;
}

.timeline-year {
font-size: 20px;
font-weight: bold;
margin-bottom: 16px;
}

.timeline-item {
margin-left: 24px;
margin-bottom: 16px;
position: relative;
}

.timeline-dot {
position: absolute;
left: -24px;
top: 8px;
width: 8px;
height: 8px;
background-color: #fbbf24;
border-radius: 50%;
}

.timeline-title {
font-weight: 500;
}

.timeline-description {
font-size: 14px;
color: #d1d5db;
margin-top: 4px;
}

.mentors-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}

.mentor-card {
background-color: rgba(30, 64, 175, 0.5);
border-radius: 8px;
padding: 24px;
text-align: center;
}

.mentor-avatar-wrapper {
width: 128px;
height: 128px;
margin: 0 auto 16px;
border-radius: 50%;
overflow: hidden;
}

.mentor-avatar {
width: 100%;
height: 100%;
object-fit: cover;
}

.mentor-name {
font-size: 18px;
font-weight: 600;
}

.mentor-title {
font-size: 14px;
color: #d1d5db;
margin-top: 8px;
}

.mentor-department {
font-size: 14px;
color: #d1d5db;
margin-top: 4px;
}
</style>